<template>
	<view class="content">
		<view class="header-photo">
			<image style="width: 100%; height: 350rpx;" src="https://small.qaqavr.com/img/zhongrui/bg.png" mode=""></image>
			<view class="search-box">
				<view class="box1">
					<view class="pholeft">
						<image style="width: 100%; height: 100%;" src="https://small.qaqavr.com/img/zhongrui/big.png" mode=""></image>
					</view>
					<input type="text" placeholder="搜索问题" />
					<view class="phoright">
						<image style="width: 100%; height: 100%;" src="https://small.qaqavr.com/img/zhongrui/delete.png" mode=""></image>
					</view>
				</view>
				<text>搜索</text>
				
			</view>
			<view class="swiper"> <u-swiper radius="5" indicator circular showTitle :list="list" keyName="coverUrl" height="170" @click="getinSwiper"></u-swiper></view>
		</view>
		<view class="content-news">
			<view class="newsheader">
				<view class="hotsearch">
				  <view><image src="https://small.qaqavr.com/img/zhongrui/rectangle.png" style="width: 100%; height: 100%;" mode=""></image></view>
				  新闻中心
				
				  <text @click="getinNews">查看更多>></text>
				</view>
			</view>
			<view class="newsbody">
			  <view class="bigbg" v-for="item in newsList.slice(0, 2)" :key="item.id" @click="newsDetails(item.id)">
			    <!-- <image style="width: 100%;height: 100%;" :src="item.coverUrl"></image> -->
			    <view class="bgphoto"><image style="width: 100%;height: 100%;" :src="item.coverUrl"></image></view>
			    <text style="position: absolute; top: 10rpx ; right: 10rpx; color: #FFFFFF; font-size: 20rpx;">{{ item.createTime.substring(0,11) }}</text>
			    <view class="bgfont">{{ item.titleName.substring(0, 10) }} ...</view>
			  </view>
			</view>
		</view>
		<view class="content-kefu">
			<view class="kefuheader">
				<view class="hotsearch">
				  <view><image src="https://small.qaqavr.com/img/zhongrui/rectangle.png" style="width: 100%; height: 100%;" mode=""></image></view>
				  常见问答
				
				  <text @click="getinQuestion">查看更多>></text>
				</view>
			</view>
			<view class="kefubody">
				<view class="list" @click="open(item.id)" v-for="(item,index) in questionList.slice(0,2)" :key="index">
					<view style=" display: flex;align-items: center; margin: 10rpx 0;  padding: 10rpx ; font-size: 28rpx;font-weight: bold;">
						 <image src="https://small.qaqavr.com/img/zhongrui/quest.png" style="width: 50rpx; height: 50rpx;margin-right: 10rpx;" mode=""></image> 
            <view style="overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">  {{item.questionContent}}</view>
						<view class="jiantousty" :class="{ active : item.zhankai == true}"></view>
					</view>

					<view v-if="item.zhankai"
						style="font-size: 24rpx; margin: 15rpx 0;  padding: 10rpx ;">
					{{item.answerContent}} </view>
				</view>

			</view>
		</view>


	</view>
</template>

<script>
	export default {
		data() {
			return {
				newsList: [],
				questionList: [],
				// zhankai:false
				list:[],//滚动轮播图数据
			};
		},
		onShow() {
			this.getNewsList();
			this.getList();
			this.getSwiperList()
		},
		methods: {
			open(v) {
				this.questionList.forEach(item => {
					if (item.id === v) {
						item.zhankai = !item.zhankai
					}
				})
			},
			getinNews() {
				uni.navigateTo({
					url: '../newslistMore/newslistMore'
				});
			},
			getinQuestion() {
				uni.navigateTo({
					url: '../questionMore/questionMore'
				});
			},
			//轮播图数据
			async getSwiperList() {
			  const dataChange = {
			    equipment: 0,
			    newsType: 0,
			    pageIndex: 1,
			    pageSize: 10,
			    queryString: ''
			  };
			  const { data } = await uni.$http.post('/news/findPage', dataChange);
			  console.log('我是轮播图数据', data.data.data);
			  if (data.statusCode !== 200) {
			    return uni.showToast({
			      title: '获取失败',
			      icon: 'none'
			    });
			  } else {
			    this.list = data.data.data;
			    this.list.forEach(item => {
			      console.log('wowoww', item);
			      item.title = item.titleName;
			    });
			  }
			},
			// 点击轮播图 进入新闻详情
			getinSwiper(index) {
			  //console.log('我是轮播图', index)
			  //console.log('轮播图', this.list)
			  const inx = index;
			  this.list.forEach((item, index) => {
			    //console.log(item)
			    //console.log(index)
			    if (index === inx) {
			      this.lunbo = item;
			    } else {
			      return;
			    }
			  });
			  console.log('哈哈哈哈哈', this.lunbo);
			  uni.navigateTo({
			    url: '../../components/newsDetails/newsDetails?id=' + this.lunbo.id
			  });
			},
			// 获取新闻列表
			async getNewsList() {
				const dataChange = {
					equipment: 0,
					pageIndex: 1,
					pageSize: 5,
					queryString: ''
				};
				const {
					data
				} = await uni.$http.post('/news/findPage', dataChange);
				console.log('我是新闻列表===>', data);
				if (data.statusCode !== 200) {
					return uni.showToast({
						title: '获取失败',
						icon: 'none'
					});
				} else {
					this.newsList = data.data.data;
				}
			},
			async getList() {
				const needData = {
					pageIndex: 1,
					pageSize: 5
				};
				const {
					data
				} = await uni.$http.post('/parameter/findFAQPage', needData);
				console.log('我是客服数据', data);
				if (data.statusCode !== 200) {
					return;
				} else {
					// const arr = data.data.data  
					data.data.data.forEach(item => {
						this.questionList.push({
							id: item.id,
							answerContent: item.answerContent,
							questionContent: item.questionContent,
							zhankai: false
						})
					})
				}
			},
			// 新闻详情
			newsDetails(id) {
				uni.navigateTo({
					url: '../../components/newsDetails/newsDetails?id=' + id
				});
			}
		}
	};
</script>

<style lang="scss" scoped>
	.content {
		position: relative;
		height: 100%;
		width: 100%;
		background-color: #f2f2f2;

		.header-photo {
			position: relative;
			height: 500rpx;

			.search-box {
				position: absolute;
				top: 0;
				left: 0;
				height: 100rpx;
				box-sizing: border-box;
				width: 100%;
				padding: 0 60rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				.box1 {
					position: relative;
					width: 85%;
					height: 70rpx;
					border-radius: 30rpx;
					margin-right: 20rpx;
					background-color: #FFFFFF;
					box-sizing: border-box;
					.pholeft {
						position: absolute;
						top: 50%;
						left: 15rpx;
						transform: translateY(-50%);
						width: 35rpx;
						height: 35rpx;
					}
					.phoright {
						position: absolute;
						top: 50%;
						right: 10rpx;
						transform: translateY(-50%);
						width: 35rpx;
						height: 35rpx;
					}
					input {
						width: 100%;
						height: 100%;
						padding-left: 60rpx;
						font-size: 26rpx;
					}
				}
				text {
					width: 10%;
					font-size: 30rpx;
					color: #FFFFFF;
				}
				
				
				
			}
			
			.swiper {
			  position: absolute;
			  top: 120rpx;
			  left: 0;
			  width: 100%;
			  box-sizing: border-box;
			  height: 300rpx;
			  padding: 0 20rpx;
			}

		}

		.content-news {
			// height: 50%;
			background-color: #f2f2f2;

			.newsheader {
				height: 60rpx;
				padding: 0 20rpx;
				
				.hotsearch {
				  position: relative;
				  display: flex;
				  align-items: center;
				  height: 50rpx;
				  padding: 10rpx 20rpx;
				  margin-top: 10rpx;
				  color: #000000;
				  font-weight: bold;
				  view {
				    display: inline-block;
				    width: 10rpx;
				    height: 80%;
				    margin-right: 20rpx;
				  }
				  text {
				    position: absolute;
				    right: 20rpx;
				    font-size: 22rpx;
				    color: #a4a4a4;
				  }
				}
			}

			.newsbody {
			  background-color: #f7f7f7;
			  padding: 0 20rpx;
			  padding-bottom: 0;
			  margin-top: 10rpx;
			  display: flex;
			  flex-wrap: wrap;
			  justify-content: space-between;
			
			  .bigbg {
			    position: relative;
			    width: 48%;
			    height: 250rpx;
			    margin-left: 10rpx;
			    margin-bottom: 15rpx;
			    box-sizing: border-box;
			    border-radius: 20rpx;
			    overflow: hidden;
			    .bgphoto {
			      height: 200rpx;
			      background-color: pink;
			    }
			    .bgfont {
			      background-color: #FFFFFF;
			      height: 50rpx;
			      display: flex;
			      align-items: center;
			      padding-left: 10rpx;
			      font-size: 26rpx;
			      overflow: hidden;
			      text-overflow: ellipsis;
			      white-space: nowrap;
			    }
			  }
			}
		}

		.content-kefu {
			// height: 50%;
			background-color: #f2f2f2;

			.kefuheader {
				height: 60rpx;
				padding: 0 20rpx;
				background-color: #f2f2f2;
				// display: flex;
				// justify-content: space-between;
				// align-items: center;
				.hotsearch {
				  position: relative;
				  display: flex;
				  align-items: center;
				  height: 50rpx;
				  padding: 10rpx 20rpx;
				  margin-top: 10rpx;
				  color: #000000;
				  font-weight: bold;
				  view {
				    display: inline-block;
				    width: 10rpx;
				    height: 80%;
				    margin-right: 20rpx;
				  }
				  text {
				    position: absolute;
				    right: 20rpx;
				    font-size: 22rpx;
				    color: #a4a4a4;
				  }
				}
			}


			.kefubody {
				padding: 0 20rpx;

				.list {
					// height: 80rpx;
					background-color: #ffffff;
					border-radius: 20rpx;
					box-sizing: border-box;
					display: flex;
					margin: 10rpx 0;
					padding: 0 10rpx;
					flex-direction: column;
					justify-content: space-between;

					view {
						.active {
							transform: rotate(-180deg) !important;
						}

						.jiantousty {
							display: inline-block;
							width: 25rpx;
							height: 12rpx;
							transform: rotate(0);
							background: url(https://small.qaqavr.com/img/zhongrui/down.png) no-repeat;
							background-size: contain;
						}
					}
				}
			}
		}

		.kefu-btn {
			position: absolute;
			bottom: 100rpx;
			right: 10rpx;
			width: 100rpx;
			height: 100rpx;
			border-radius: 5rpx;
			overflow: hidden;
		}
	}
</style>
